<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<!-- 富文本编辑器 js引入-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.all.min.js}">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/common.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript">
$(document).ready(function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
});
window.onresize = function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
}
</script>
</head>
<body class="layui-layout-body">
	<div id="addDiv" align="center" style="overflow:auto;">
		<div style="margin-top: 50px;">
			<form id="addForm" class="layui-form layui-form-pane"
				th:action="@{/functional/edit}" method="post">
				<input name="id" value="" style="display: none" th:value="${cradBase.id}">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label">内容标题</label>
						<div class="layui-input-inline">
							<label class="layui-form-label" style="border: none;background-color: white;">[[${cradBase.title}]]</label>
						</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>推荐标题</label>
						<div class="layui-input-inline" style="width: 500px;" align="left">
							<input placeholder="最多35个字符" name="title"
								class="layui-input" maxlength="35" th:value="${contents != null ? contents.recommendTitle : ''}">
						</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label">内容正文</label>
						<div class="layui-input-inline">
							<label class="layui-form-label" style="border: none;background-color: white;">[[${cradBase.content}]]</label>
						</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>推荐内容</label>
						<div class="layui-input-inline" style="width: 500px;" align="left">
							<textarea rows="10" cols="100" maxlength="60" placeholder="最多60个字符" name="content" class="layui-textarea"
							th:text="${contents != null ? contents.recommendContent : ''}"></textarea>
						</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>图片样式</label>
						<div class="layui-input-inline" style="width: 650px;" align="left">
							<input type="radio" name="photoSize" lay-filter="photoSize" value="1" title="一张图" th:checked="${photoSize != null ? photoSize == 1 : 'true'}"/>
							<input type="radio" name="photoSize" lay-filter="photoSize" value="3" title="三张图" th:checked="${photoSize != null ? photoSize == 3 : 'false'}"/>
							<label th:text="${photos != null ? photos : ''}" id="photoLabel" style="display: none;"></label>
							<label th:text="${photoSize != null ? photoSize : ''}" id="photoSizeLabel" style="display: none;"></label>
							<div id="onePhotoDiv" style="margin-top: 20px;display: block;">
								<img id="photoBig" alt="" th:src="@{/images/def_icon.png}" style="width: 600px;height:200px" onclick="previewImg(this)">
								<input id="photoBigUrl" type="text" name="photoOne" style="display: none;">
								<br>
								<!-- 1035,570 -->
								<input type="button" value="浏览" class="layui-input" onclick="selectFile('*','*',1000000,'photoBigBack')" style="width: 300px;">
							</div>
							<div id="threePhotoDiv" style="margin-top: 20px;display: none;">
								<img id="photoImg1" alt="" th:src="@{/images/def_icon.png}" style="width: 200px;height:200px" onclick="previewImg(this)">
								<img id="photoImg2" alt="" th:src="@{/images/def_icon.png}" style="width: 200px;height:200px" onclick="previewImg(this)">
								<img id="photoImg3" alt="" th:src="@{/images/def_icon.png}" style="width: 200px;height:200px" onclick="previewImg(this)">
								<input id="photo1" type="text" name="photoThree" style="display: none;"/>
								<input id="photo2" type="text" name="photoThree" style="display: none;"/>
								<input id="photo3" type="text" name="photoThree" style="display: none;"/>
								<br>
								<!-- 330*330 -->
								<input type="button" value="浏览" class="layui-input" onclick="selectFile('*','*',1000000,'photoImg1Back')" style="width: 200px;display: inline-block;">
								<input type="button" value="浏览" class="layui-input" onclick="selectFile('*','*',1000000,'photoImg2Back')" style="width: 200px;display: inline-block;">
								<input type="button" value="浏览" class="layui-input" onclick="selectFile('*','*',1000000,'photoImg3Back')" style="width: 200px;display: inline-block;">
							</div>
							<span id="suggest"> </span>
						</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>排序</label>
						<div class="layui-input-inline" style="width: 500px;" align="left">
							<input placeholder="请输入1-9999的数字" name="sort" onchange="sortChange(this)"
								class="layui-input" maxlength="4" th:value="${contents != null ? contents.sort : ''}">
						</div>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"></label>
						<div class="layui-input-inline" style="width: 500px;" align="left">
							<input type="radio" name="recommend" lay-filter="recommend" value="0" title="推荐" th:checked="${contents != null ? contents.delStatus == 0 : 'true'}"/>
							<input type="radio" name="recommend" lay-filter="recommend" value="1" title="取消推荐" th:checked="${contents != null ? contents.delStatus == 1 : 'false'}"/>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<input onchange="onFileChange(event)" type="file" name="icon" id="qiniuFile" style="display: none;">
<script type="text/javascript">
layui.use(['form'], function(){
	var formObj = layui.form;
	var color = "#B3D9D9";
	formObj.on('radio(photoSize)', function(data){
		var val = data.value;
		if(val == 1){
			$("#onePhotoDiv").css("display","block");
			$("#threePhotoDiv").css("display","none");
			$("#suggest").html(" (建议尺寸690*380，大小不超过100KB)");
		}else{
			$("#onePhotoDiv").css("display","none");
			$("#threePhotoDiv").css("display","block");
			$("#suggest").html(" (建议尺寸220*220，大小不超过100KB)");
		}
		
	});
	
	var radioValue = $('#addDiv input[name="photoSize"]:checked').val();
	
	if (radioValue==1) { 
		$("#suggest").html(" (建议尺寸690*380，大小不超过100KB)");
	 } else if (radioValue==3){
	 	$("#suggest").html(" (建议尺寸220*220，大小不超过100KB)");
	 } 
	
	
	
});
$(document).ready(function(){
	var json = $("#photoLabel").text();
	var jsonObj = JSON.parse(json);
	var photoSize = $("#photoSizeLabel").text();
	if(parseInt(photoSize) == 1){
		$("#onePhotoDiv").css("display","block");
		$("#threePhotoDiv").css("display","none");
	}else{
		$("#onePhotoDiv").css("display","none");
		$("#threePhotoDiv").css("display","block");
	}
	$.each(jsonObj, function(idx, obj) {
		if(parseInt(photoSize) == 1){
			$("#photoBigUrl").val(obj);
			$("#photoBig").attr("src",obj);
		}else{
			$("#photo" + (idx + 1)).val(obj);
			$("#photoImg" + (idx + 1)).attr("src",obj);
		}
	});
});


function sortChange(viewObj){
	var sort = $(viewObj).val();
	if(isNaN(sort)){
		$(viewObj).val("");
		layer.msg("排序只能输入数字");
	}
	if(parseInt(sort) < 1 || parseInt(sort) > 9999){
		layer.msg("排序范围为1-9999");
		$(viewObj).val("");
	}
}



function photoBigBack(photoUrl){
	$("#photoBig").attr("src",photoUrl);
	$("#photoBigUrl").val(photoUrl);
}
function photoImg1Back(photoUrl){
	$("#photoImg1").attr("src",photoUrl);
	$("#photo1").val(photoUrl);
}
function photoImg2Back(photoUrl){
	$("#photoImg2").attr("src",photoUrl);
	$("#photo2").val(photoUrl);
}
function photoImg3Back(photoUrl){
	$("#photoImg3").attr("src",photoUrl);
	$("#photo3").val(photoUrl);
}





function selectFile(photoWidth,photoHeight,maxSize,uploadBack) {
	$("#qiniuFile").click();
	$("#qiniuFile").attr("photoWidth",photoWidth);
	$("#qiniuFile").attr("photoHeight",photoHeight);
	$("#qiniuFile").attr("maxSize",maxSize);
	$("#qiniuFile").attr("uploadBack",uploadBack);
}
function onFileChange(e) {
	let files = e.target.files || e.dataTransfer.files;
	if (!files.length) {
		return;
	}
	var maxSize = parseInt($("#qiniuFile").attr("maxSize"));
	if (files[0]['size'] > maxSize) {
		layer.msg("图片过大");
		return false;
	}
	createImage(files);
}
function createImage(file, val) {
	var mypic = document.getElementById("qiniuFile").files[0];
	var windowUrl = window.URL.createObjectURL(mypic);
	// 创建对象
	var img = new Image()
	// 改变图片的src
	img.src = windowUrl
	var radioValue = $('#addDiv input[name="photoSize"]:checked').val();
	img.onload = function() {
		// 打印
		//600x240
	/* 	if($("#qiniuFile").attr("photoWidth") === '*' || $("#qiniuFile").attr("photoHeight") === '*'){
		}else{
			var photoWidth = parseInt($("#qiniuFile").attr("photoWidth"));
			var photoHeight = parseInt($("#qiniuFile").attr("photoHeight"));
			if (img.width != photoWidth || img.height != photoHeight) {
				layer.msg("图片尺寸不对");
				return false;
			}
		}
		uploadImg(file); */
		
		
		if(radioValue == 1 && (img.width != 690 || img.height != 380) ){
			layer.msg("图片比例只能为690*380哦！");
			return false;
		}else if(radioValue == 3 && (img.width != 220 || img.height != 220) ){
			layer.msg("图片比例只能为220*220哦！");
			return false;
		}else{
			uploadImg(file);
		}
	}
}
function uploadImg(file) {
	$.get('http://qiniu.systoon.com/getToken.php', function(e) {
		var formData = new FormData();
		formData.append('token', e);
		formData.append('file', file[0]);
		$.ajax({
			url : 'http://upload.qiniu.com',
			type : 'POST',
			data : formData,
			async : false,
			cache : false,
			contentType : false,
			processData : false,
			success : function(e) {
				var url = 'http://apr.qiniu.toon.mobi/' + e.key;
				console.warn(url);
				var  func=eval($("#qiniuFile").attr("uploadBack"));
				//创建函数对象，并调用
				new func(url);
				$("#qiniuFile").val("");
			},
			error : function(e) {
				layer.msg('upload error' + e);
			}
		});
	});
}
</script>
</body>
</html>